body{
	font-size: 14px;
	font-family: "-apple-system";
	*{
		font-family: $ff;
	}
	a{
		text-decoration: none;
	}
	/* user-select: text !important;
	-webkit-user-select: text !important; */
	* {
		user-select: text !important;
	    -webkit-user-select: text !important
	}
}

ion-content{
	background: $bg;
	&.hastab-pay{
		bottom: $tabs-height + $bar-height;
		+.bar-footer{
			bottom: $tabs-height
		}
	}
} 
.has-side-row{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 0;
	.col{
		padding: 0;
		position: relative;
		height: 100%;
	}
	.col-33{
		border-right: 1px solid #eee;
	}
}
h4.title{
	margin: 12px 10px;
	padding: 0 8px;
	font-size: 14px;
	line-height: 1;
	border-left: 3px solid $deep-orange;
	font-weight: bold;
	color: $primary;
	small{
		font-size: 12px;
	}
    .button{
        &.fr{
            margin-top: -5px;
            margin-right: -5px;
        }
    }
}
.texts{
	font-size: 12px;
	line-height: 1.5;
}
.intro{
	background: #fff;
	padding: 10px 12px;
	color: #666;
	line-height: 1.8;
	border: $borderColor solid;
	border-width: 1px 0 1px;
	p{
		margin: 0;
	}
}
.arti-title{
	text-align: center;
	font-size: 16px;
	color: $primary;
	padding: 10px ;
	border-bottom: 1px solid #eee
}
.arti-info{
	text-align: center;
	color: #999;
	font-size: 12px;
	span{
		margin: 0 5px;
	}
}
.arti-body{
	padding: 10px;
	line-height: 1.8;
	img{
		width: 100%
	}
	p{
		color: #666
	}
}
.user-heade{
	position: relative;
	height: 240px;
	.img-wrap{
		height:150px;
		position: relative;
		// overflow: hidden;
		&:after{
			content:"";
			background-color: $positive;
			opacity: .9;
		}
		.bg-wrap,&:after{
			@include circular(1000px);
			@include box-middle(-50%,-920px);
			overflow: hidden;
		}
		.bg-wrap{
			img{
				height:200px;
				width:400px;
				position: absolute;
				left:50%;
				margin-left:-200px;
				bottom:0;
			}
		}
		.center-info{
			@include box-middle;
			z-index: 2;
			text-align: center;
			color: #fff;
			.avatar{
				border:2px solid #fff;
				background-color: #FFF;
				margin: 0 auto;
			}
			.name{
				font-size:14px;
				margin: 5px 0 2px;
			}
			p{
				font-size:12px;
				color:rgba(#fff, .8)
			}
		}

	}
	.info-row{
		padding-top:30px;
	}
}
.card-block{
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(#000, .08)
}
.info-rows{
	margin-top: 20px;
	.col{
		text-align: center;
		padding-top: 10px;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			top: 10px;
			bottom: 10px;
			border-right: 1px solid #eee;
		}
		&:last-child:after{
			display: none;
		}
		.number{
			width: 100%;
			font-size: 24px;
			color: $positive;
			font-weight: 100;
		}
		.label{
			width: 100%;
			font-size: 12px;
			color: #999;
			margin-top: 3px;
		}
	}
}
.tab-item{
	opacity: 1;
	&.tab-item-active{
		color: $yellow
	}
}
.price-bar{
	padding: 5px;
	background: #fff;
	border: 1px solid $borderColor;
	margin: 0 -1px;
	position: relative;
	line-height: 34px;
}

p.info{
	padding: 15px;
	line-height: 1.8;
	color: #888;
	font-size: 14px;
}
.bold{
	font-weight: bold
}
.price{
	font-size: 18px;
	color: $red-500;
	vertical-align: middle;
	em{
		font-size: 14px;
		margin-right: 5px;
	}

}
.old-price{
	color: #999;
	margin-left: 10px;
	text-decoration: line-through;
	font-style: oblique;
	vertical-align: middle;
}

.foot-btn{
	padding: 5px 16px;
	.button-block{
		margin: 0;
	}
}
.button-small{
	font-size: 12px !important;
	min-height: 20px !important;
	line-height: 22px !important;
}

.yqs-wrap{
	background: url(../img/yqs.jpg) no-repeat center center;
	background-size: cover;
}

$hb-height : 60px;
.hb-wrap{
	@include position(absolute,auto 10px 0);
	height: $hb-height + 50;
	background: $red-700;
	border-radius: 10px 10px 0 0 ;
	.hb-front{
		@include position(absolute,$hb-height 0 0);
		background: $red-500;
		border-radius: 10px 10px 0 0 ;
		z-index: 10;
		font-size: 16px;
		color: $yellow;
		text-align: center;
		padding-top: 15px;
		font-weight: bold;
	}
	.paper{
		z-index: 9;
		background: #fff;
		// height: 400px;
		@include position(absolute,auto 10px $hb-height - 20);
		.paper-header{
			padding: 10px;
			font-size: 16px;
			i{
				font-size: 24px;
				color: #999
			}
		}
		.paper-body{
			padding:0 10px;
		}
	}
}
.login-wrap{
	padding:40px 30px 0;
	.login-header{
		text-align: center;
		margin-bottom: 30px;
		img{
			display: inline-block;
			width: 80px;
		}
		h1.title{
			font-size: 20px;
			color: #333;
		}
	}
	.login-form{
		.list{
			background-color: transparent;
			margin-bottom: 20px;
			.item-input{
				padding-left: 0;
				border-width: 0 0 1px ;
				border-color: #ddd;
				border-radius: 0;
				margin: 0 0 10px;
				background-color: transparent;
				select{
					padding-left: 8px;
					border:none;
					max-width: 100%;
					width: 100%;
					background-color: transparent;
					padding-bottom: 0;
					padding-top: 0;
				}
				.icon{
					font-size: 24px;
					color: #999;
				}
			}
		}
		.button{
			height: 36px ;
			line-height: 36px;
			margin-bottom: 15px;
		}
	}
	


}

.button-white{
	background-color: rgba(#fff, .9);
	color: $positive;
	border-color: $positive;
	&.activated{
		background-color: #fff;
		border-color: #fff
	}
	&.button-outline{
		border-color: #fff;
		color: #fff;
		&.activated{
			background-color: #fff;
			color: $positive
		}
	}
}
.bg-positive{
	background-color: $positive;
}

.rmiddle{
	top: 15px !important;
}
.grid-list{
	border-top: 1px solid #ddd;
	li{
		padding: 10px;
		border: solid #ddd;
		border-width: 0 1px 1px 0;
		&:nth-child(even){
			border-right: none;
		}
		div{
			line-height: 1.8
		}
		.tip{
			font-size: 12px;
			color: #999;
		}
	}
}


.reg-form{
	margin: 30px 0;
	.item-input{
		margin: 10px 0;
		// background-color: #f9f9f9
	}
}
h3.title{
	font-size: 18px;
	margin: 30px 0 0 ;

}
.no-bg{
	background-color: transparent;
}

.button-bar{
	.button{
		padding-left: 3px;
		padding-right: 3px;
		+ .button{
			margin-left: -1px;
		}
	}
}

.bar-footer	{
	.has-btn{
		padding-top: 5px;
		.button{
			color: #fff;
			margin: 0 3px;
		}
	}
}

.list{
	.item-body{
		h2{
			margin: 0
		}
		p{
			margin-bottom: 0;
			line-height: 2
		}
	}
	.item-radio{
		.radio-icon{
			&:before{
				content: "\f401" ;
				color: #ccc 
			}
		}
		input:checked + .radio-content .radio-icon:before{
			content: "\f400";
			color: $blue
		}
		.radio-content{
			.item-content{
				padding-right: 12px;
				padding-left: 40px;
			}
		}
		
	}
	.radio-icon{
		visibility: visible;
		@include left-middle(0);
		right: auto;
		&:before{
			display: block;
		}
	}
	.checkbox input:checked+.checkbox-icon:before, 
	.checkbox input:checked:before{
		background-color: $blue;
		border-color: $blue;
	}
}



.time-wrap{
	background-color: #f5f5f5 !important;

	
	.button{
		min-height: 30px;
		height: 32px;
		line-height: 30px;
	}
	
}

.time-row{
	background: $green-500 !important;
	border: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	.st{
		font-size: 12px;
	}
	.lt{
		font-size: 24px;
		color: $yellow
	}
}

.ques{
	background-color: #f9f9f9;
	line-height: 1.5;
	padding: 10px 12px;
	border: solid $borderColor;
	border-width: 1px 0 1px;
}
.c-info{
	text-align: center;
	padding: 50px 10px 10px;
	border-bottom:1px solid $borderColor;
	.cir{
		display: inline-block;
		@include circular(100px);
		padding-top: 30px;
		line-height: 1.5;
		background-color: $green;
		color: #fff;

	}
	h4{
		font-size: 14px;
	}
	p{
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}
}

.footer-texts{
	padding: 10px;
	color: #666
}


.menu-row{
    $side-width : 120px;
    height: 100%;
    @include clearfix;
    >div{
        position: relative;
        height: 100%;
        &.class-list{
            float: left;
            width:$side-width;
            background: #f4f4f4;
            border-right: 1px solid $borderColor;
            a{
                background: #fcfcfc;
                &.activated{
                    background: #f5f5f5;
                }
                &.active{
                    background: #f5f5f5;
                    color: $positive
                }
            }

        }
        &.class-content{
            margin-left: $side-width
        }
    }
}
.grid-wrap{
  @include clearfix;
  .list{
    @include clearfix;
    padding:0 5px;
    margin-top: -5px;
    .item{
      margin: 0 !important;
      padding: 5px !important;
      border: none;
      width: 50%;
      float: left;
      background-color: transparent;
      .item-content{
        padding: 0;
        border-radius: 3px;
        overflow: hidden;
        border: 1px solid $borderColor;
        // box-shadow: 0 0 8px rgba(#000, .25);
        img{
          width: 100%
        }
        h2,p{
          font-size: 12px;
          padding: 0 8px;
          line-height: 1.5;
        }
      }
      .integral{
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 10px;
        height: 18px;
        line-height: 18px;
        border-bottom-left-radius: 10px;
        background: rgba($red, .8);
        color: #fff;
        font-size: 12px;
      }
    }
  }

}
            
.rbox{
	@include circular(100px);
	background: #eee;
	color: #fff;
	margin: 15px auto;
	display: block;
}

.progress-bg-wrap{
	position: relative;
	background: #f1f1f1;
	padding: 5px 0;
	.info-text{
		color: #333;
		position: relative;
		z-index: 10;
		padding: 0 12px;
		p{
			margin: 0;
			line-height: 1.5;
		}
	}
	.progress-bar{
		background: $green-100;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 1;

	}
}
.progress{
	height: 4px;
	background: #ddd;
	border-radius: 3px;
	position: relative;
	margin: 8px 5px 0;
	.progress-bar{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		border-radius: 3px;
		background-color: $blue-500;
	}
}
.box,.btn{
	padding: 5px 8px;
	color: #fff;
	font-size: 12px;
	display: inline-block;
}
.box{
	margin-left: 5px;
}
.btn{
	border-radius: 3px;
}
.btn-row{
	padding: 10px 12px;
	border: solid $borderColor;
	border-width: 1px 0 1px;
	.btn + .btn{
		margin-left: 10px;
	}
}



$video-height:200px;
.video-wrap{
	position: relative;
	.video-content{
		height: $video-height;
		background: #222;
	}
	.video-bar{
		background: #fff;
		height: 40px;
		line-height: 39px;
		padding:0 80px 0 10px;
		position: relative;
		border-bottom: 1px solid #eee;
		a.icon{
			color: #999;
			font-size: 12px;
			@include right-middle(10px); 
			i{
				margin-right: 5px;
				font-size: 18px;
				vertical-align: middle;
			}
		}
	}
}
.tabs-top{
	&.tabs-striped{
		.tab-item{
			opacity: 1 !important;
			color: #666 !important;
			&.active{
				line-height: 46px;
				color: $positive !important;
			}
		}
	}

}
.tab-pane{
	display: none;
	&.active{
		display: block;
	}
}
 
.tabs-wrap{
	@include position(absolute,$video-height + 40px 0 48px);
	.tabs{
		height: 44px;
		line-height: 43px;
	}
	.tab-content{
		@include position(absolute,44px 0 0);
		.scroll-wrap{
			top: 0;
			bottom: 0;
		}
	}
}
.tabs-static{
	top: 0 !important;
	z-index: 99;
	padding: 0;
	border-bottom:1px solid #eee !important;
	background-image: none !important;
	.tab-item{
		position: relative;
		overflow: visible;
		&:after{
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1px; 
			height: 2px;
			background: $positive;
			@include transition(.3s);
			@include transform(scaleX(0));
		}
		&.tab-item-active{
			&:after{
				@include transform(scaleX(1));
			}
		}
	}
	
}

.fab-btn{
	position: fixed;
	right: 15px;
	bottom: 60px;
	@include circular(44px);
	background: $red;
	color: #fff;
}


.big-card{
	padding: 20px 15px;
	color: #fff;
	text-align: center;
	h2{
		font-size: 32px;
		color: #fff;
		margin: 0 0 5px;
	}
	p{
		margin: 0;
		font-size: 12px;
	}
}



.timeline{
	$color: $green-100;
	margin:0 20px;
	border-left: 3px solid #eee;
	li{
		position: relative;
		padding-left: 30px;
		margin-left: -11px;
		margin-top: 20px;
		&:after,&:before{
			content: "";
			position: absolute;
			left: 0;
			top: -8px;
			@include circular(20px);
			background: $color;
		}
		&:after{
			@include transform(scale(.5));
			background: $green-500;
		}
		h4{
			margin: 0;
			padding: 5px 10px;
			background: $color;
			color: darken($color, 50%);
			font-size: 12px;
			position: relative;
			&:before{
				position: absolute;
				left: -6px;
				top: 0;
				content: "";
				border: 10px solid ;
				border-color:$color transparent transparent
			}
		}
		p{
			background: lighten($color, 13%);
			padding: 10px;
			font-size: 12px;
			border: 1px solid $color
		}
	}
}

.cb-right{
	.checkbox{
		position: absolute;
		right: 10px;
		left: auto;
	}
}

.foot-label	{
	line-height: 34px;
}
.right-middle{
	@include right-middle(10px);
}
.row{
	&.nopadding{
		padding: 0;
		.col{
			padding: 0;
			line-height: 20px;
		}
	}
}

.dtk-list{
	text-align: center;
	padding: 10px 12px;
	.btn{
		border-radius: 3px;
		color: #fff;
		font-size: 14px;
		margin-bottom: 15px;
		padding: 5px;
		display: block;
		&.yes{
			background-color: $green-500
		}
		&.no{
			background-color: $red-500
		}
	}
}


/* 抽奖大转盘样式 */
.choujiang {
	display: block;
	margin: 20px 0;
	.turnplate {
		width: 340px;
		height: 340px;
		// border-radius: 50%;
		margin: 0 auto;
		background-image:url(../img/lottery/turnplate-bg.png);
		background-size:100% 100%;
		display: block;
		position: relative;
		canvas{
			width:100%; 
			height:100%;
			img{
				width: 100%;
			}
		}
		img.pointer {
			position: absolute;
			width: 31.5%;
			height: 42.5%;
			left: 34.6%;
			top: 23%;
		}
	}
}

